<template>
	<view class="wrap">
		<view style="position: absolute;">
			<u-navbar :custom-back="onBack" back-icon-color="#fff" :background="background" 
				:border-bottom="false">				
			</u-navbar>
		</view>
		<view class="head">
			<image mode="aspectFill" class="bg" :src="topicInfo.cover"></image>
			<view class="head-c">
				<text class="name">{{ topicInfo.title }}</text>
				<view class="count">
					<u-button class="mg-left-auth" @click="showShare = true" :custom-style="btnStyle" shape="circle">
						<u-icon name="share"></u-icon>
					</u-button>
				</view>
			</view>
		</view>
		<!-- 简介 -->
		<view class="member-wrap">
			<view class="member-wrap-head">
				<text class="notice-txt u-line-1">{{ topicInfo.desc }}</text>
			</view>
		</view>
		<!-- 分类tab -->
		<view class="tabs-box">
			<view class="tab-left"><u-tabs :list="tabList" :is-scroll="false" :current="current" @change="tabsChange"></u-tabs></view>
		</view>
		<view v-show="current == 0">
			<free-moment-list v-for="(item,index) in list" :key="index"
			:item="item" :index="index" @action="doAction" @reply="replyEvent"></free-moment-list>
		</view>
		<!-- 选择分享弹窗 -->
		<u-popup v-model="showShare" mode="center" border-radius="20" width="80%">
			<view class="share-type">
				<button open-type="share" class="type-item u-reset-button">
					<u-icon class="icon" name="weixin-fill" color="#00b33c"></u-icon>
					<text>发给微信好友</text>
				</button>
				<view class="type-item" @click="copyPageUrl">
					<u-icon class="icon" name="cut" color="#0099ff"></u-icon>
					<text>复制链接</text>
				</view>
			</view>
		</u-popup>
		
		<!-- 上拉加载 -->
		<view class="flex align-center justify-center py-5 bg-light"
		v-if="list.length >= 10">
			<text class="text-muted font">{{loadmore}}</text>
		</view>
		<!-- 弥补操作菜单高度 -->
		<view style="height: 200rpx;"></view>
	</view>
</template>

<script>
import freeMomentList from '@/components/free-ui/free-moment-list.vue';
import { mapState } from 'vuex'
export default {
	components: {
		freeMomentList,
	},
	data() {
		return {
			imgUrl:this.$site.img_url,
			loadmore:"上拉加载更多",
			current: 0,
			list:[],
			page:1,
			showShare:false,
			tabList: [
				{
					name: '全部动态'
				}
			],
			btnStyle: {
				marginRight: 0,
				width: '150rpx',
				fontSize: '12px',
				height: '60rpx',
				lineHeight: '60rpx',
				backgroundColor: '#333',
				color: '#fff'
			},
			shareBtnStyle: {
				backgroundColor: '#333'
			},
			topicId: 0,
			topicInfo: {
				user: {
					username: '',
					nickname: '',
					avatar: ''
				}
			},
		};
	},
	onLoad(options) {
		this.topicId = options.id;

		// if (options.scene) {
		// 	this.topicId = options.scene;
		// }

		this.getTopicInfo();
		this.getData()
	},
	onReachBottom() {
		if(this.loadmore !== '上拉加载更多'){
			return
		}
		this.page += 1
		this.loadmore = '加载中...'
		this.getData().catch(err=>{
			this.page -= 1
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			});
			this.loadmore = '上拉加载更多'
		})
	},
	onPullDownRefresh() {
		this.page = 1
		this.getData().then(res=>{
			uni.showToast({
				title: '刷新成功',
				icon: 'none'
			});
			uni.stopPullDownRefresh()
		}).catch(err=>{
			uni.showToast({
				title: '刷新失败',
				icon: 'none'
			});
			uni.stopPullDownRefresh()
		})
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: this.topicInfo.title + '-' + this.topicInfo.desc,
			path: '/pages/topic/detail?id=' + this.id,
			imageUrl: this.topicInfo.cover
		};
	},
	computed:{
		...mapState({
			user:state=>state.user.user
		}),
	},
	methods: {
		copyPageUrl() {
			let that = this;
			uni.setClipboardData({
				data: 'pages/topic/detail?id=' + this.topicId,
				success: function() {
					uni.hideToast();
					that.$q.toast('复制成功', 'success');
					that.showShare = false;
				}
			});
		},
		
		onBack() {
			uni.navigateBack({
				delta:1
			})
		},
		tabsChange(index) {
			this.current = index;
		},
		//获取圈子详情
		getTopicInfo() {
			this.$C.get(`/circle_read/${this.topicId}`, )
				.then(res => {
					this.topicInfo = res.video;
					console.log('55555555',this.topicInfo);
			});
		},
		//获取圈子动态
		getData(){
			let page = this.page
			let param = '?user_id='+this.user.id
			this.$C.get(`/moment_timeline/${this.page}${param}`).then(res=>{
				this.list = page === 1 ? res : [...this.list,...res]
				this.loadmore = this.list.length === (page * 10) ? '上拉加载更多' : '没有更多了'
			})
		},

	}
};
</script>

<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.wrap{
	height: calc(100vh);
}
.mg-left-auth{
	margin-left: auto;
}	

.mg-left-20{
	margin-left: 20rpx;
}

.tabs-box{
	background-color: #FFFFFF;
	 .tab-left{
		 width: 30%;
	 }
}

  /*  */
.notice-txt {
	color: #999;
	font-size: 12px;
}

.grid-text {
	font-size: 12px;
	color: #616161;
	margin-bottom: 30rpx;
}

.head {
	position: relative;
	height: 380rpx;
}

.head-c {
	position: absolute;
	top: 200rpx;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	color: #fff;
	padding: 30rpx;
}

.head-c .count {
	font-size: 10px;
	display: flex;
	align-items: center;
}

.head-c .count text {
	margin: 0 5rpx;
	color: #e6e6e6;
}

.head-c .name {
	font-size: 20px;
	font-weight: bold;
}

.margin-left {
	margin-left: auto;
	margin-right: 20rpx;
}

.head .bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* 管理员 */
.member-wrap {
	padding: 30rpx;
	background-color: #fff;
	border-bottom: 1px solid #eee;
}

.member-wrap .avatar {
	margin-bottom: 10rpx;
}

.member-wrap .member-wrap-head {
	display: flex;
	.user-num{
		margin-left: auto;
		color: #999;
	}
	
	.icon {
		margin-left: auto;
		color: #999;
	}
}
// 置顶
.post-top-box{
	background-color: #fff;
	padding: 20rpx;
	.post-item{
		display: flex;
		align-items: center;
		padding: 20rpx;
		font-size: 28rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.tag{
			background-color: #333;
			color: #fff;
			padding: 0 10rpx;
			border-radius: 10rpx;
			font-size: 20rpx;
			height: 40rpx;
			line-height: 40rpx;
			margin-right: 20rpx;
		}
	}
}
// 圈话题
.dis-wrap{
	display: flex;
	margin-top: 20rpx;
	.d-item{
		flex-grow:0;
		flex-shrink:0;
		width: 330rpx;
		background-color: #F5F5F5;
		border-radius: 10rpx;
		padding: 20rpx;
		font-size: 28rpx;
		font-weight: 600;
		margin-right: 20rpx;
	}
}

// 菜单
.tabbar{
	position: fixed;
	bottom: 50rpx;
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
	background-color: #fff;
	display: flex;
	padding: 10rpx;
	box-shadow: 0 0 10rpx #e6e6e6;
	font-size: 24rpx;
	border-radius: 100rpx;
	z-index: 9999;
	.tab-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		.icon{
			margin-top: 10rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
	
	.mid-button{
		background-color: #333;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		color: #fff;
	}
}

// 菜单弹窗
.popup-head{
	text-align: center;
	font-size: 24rpx;
	position: relative;
	padding: 30rpx;
	border-bottom: 1px solid #F5F5F5;
	margin-bottom: 30rpx;
	.close{
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}
}

.menu-icon{
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 10rpx;
}

// 分享类型弹窗
.share-type{
	padding: 50rpx 30rpx;
	.type-item{
		background-color: #F5F5F5;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		.icon{
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}
		
		&:nth-child(2){
			margin: 20rpx 0;
		}
	}
}

//海报弹窗
.canvas-box{
	height: 500px;
	position: relative;
	.footer{
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		right: 20rpx;
	}
}


</style>
